<template>
    <div>
        <!-- ）-抵押房产情况:zrrFrzFc-->
        <div class="w_100 headTips d_f j_c_s_b">
            <div class="d_f a_i_c">
                <div class="d_f a_i_c">
                    <div class="line"></div>
                    {{ name }}
                </div>
                <div class="add d_f j_c_c a_i_c" @click="addHours" v-if="!isAudit">
                    <span class="size">+</span>
                    <span>添加房产</span>
                </div>
            </div>
            <div class="isClose" @click="close">
                <el-icon v-if="type == 'smallForm'">
                    <CloseBold />
                </el-icon>
            </div>
            <el-switch v-if="type == 'bigForm'" @change="change" v-model="status"
                style="--el-switch-on-color: #13ce66;" />
                <el-button type="primary" v-if="type == 'useForm'&&isReset==1" @click="clearForm">清除表单</el-button>
        </div>
        <div class="formBox">
            <div v-for="(item, index) in model.housePropertyData.housePropertyData" :key="index">
                <div class="tips d_f a_i_c j_c_s_b">
                    <span>房产 - {{ index + 1 }}</span>
                    <div class="error" v-if="index > 0&&!isAudit" @click="deleteOut(index)">删除</div>
                </div>
                <div class="zrrFrzFc_form">
                    <myform :fields="fields" ref="formRefs" :rules="rules" :model="item" :options="options"
                        class="m_t_16">
                        <template v-slot:area>
                            <el-cascader :disabled="isAudit" v-model="item.area" placeholder="请选择省市区" :options="districts"
                                :props="areaProps" />
                        </template>
                    </myform>
                </div>
            </div>
            <div class="segment" v-if="fields1.length > 0"></div>
            <div class="formArrow d_f a_i_c m_t_30" v-if="fields1.length > 0">
                <img src="../../assets/formArrow.png" alt="">
                <span>{{ subTitle || '新加字段' }}</span>
            </div>
            <div v-if="fields1.length > 0">
                <myform :fields="fields1" :model="model.housePropertyData" :options="options" class="m_t_16">
                </myform>
            </div>
        </div>
    </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, onBeforeMount, ref,watch} from 'vue'
import { copy } from '../../utils/date'
import { formGet, unitFormSet } from '../../api/system/flowPath'
import { listByParentArr } from '../../api/login'
import { Message } from '../../utils/resetMessage'
import { useRouter } from 'vue-router'
import { zrrFrzFcType } from './data'
import { NUMBRT_REG } from '../../utils/regular'
import { NUMENGLISH_REG } from '../../utils/regular'
import { CloseBold } from '@element-plus/icons-vue'
const model = {
    housePropertyData:{
        housePropertyData: [
        {
            customerId: '',//客户ID
            area: '',//坐落区域     
            address: '',//地址
            owner: '',//产权权利人
            ownership: '',//所有权性质：完全所有，共同所有
            buildFloorArea: '',//建筑面积
            category: '',//房产类型：自建房、商品房、小产权房、公租房、廉租房、法拍房.
            yearOfCompleted: '',//竣工年份
            propertyCode: '',//产权证编号
            mortgageStatus: '',//抵押情况：0-未抵押，1-已抵押
        }
    ]
    },
}
export default defineComponent({
    name: '',
    props: {
        type: {
            type: String,
            default: '',
        },
        unitId: {
            type: [String, Number],
            default: '',
        },
        isEnabled: {
            type: Number,
            default: '',
        },
        nodeObj: {
            type: Object,
            default: {}
        },
        vars: {
            type: Object,
            default: {}
        },
        isAudit: {
            type: Boolean,
            default: true
        }
    },
    components: {
        CloseBold
    },
    setup(props: any) {
        const data = reactive({
            model: copy(model),
            status: true,
            id: '',
            name: '抵押房产情况',
            subTitle: '',
            fields1: [],
            options: {
            },
            areaProps: {
                multiple: false,
                value: 'name',
                label: 'name',
                children: 'districts'
            },
            fields: [
                {
                    label: "房产坐落区域",
                    prop: 'area',
                    labelWidth: '130px',
                    disabled: false,
                },
                {
                    label: "房产地址",
                    prop: 'address',
                    placeholder: '请输入房产地址',
                    type: 'input',
                    labelWidth: '130px',
                    disabled: false,
                },
                {
                    label: "原房产权利人",
                    prop: 'owner',
                    placeholder: '请输入原房产权利人',
                    type: 'input',
                    labelWidth: '130px',
                    disabled: false,
                },
                {
                    label: "所有权性质",
                    prop: 'ownership',
                    placeholder: '请输入所有权性质',
                    type: 'input',
                    labelWidth: '130px',
                    disabled: false,
                },
                {
                    label: "建筑面积",
                    prop: 'buildFloorArea',
                    placeholder: '请输入建筑面积',
                    type: 'input',
                    labelWidth: '130px',
                    unit: 'm²',
                    disabled: false,
                },
                {
                    label: "房产类型",
                    prop: 'category',
                    placeholder: '请输入房产类型',
                    type: 'input',
                    labelWidth: '130px',
                    disabled: false,
                },
                {
                    label: "竣工年份",
                    prop: 'yearOfCompleted',
                    placeholder: '请选择竣工年份',
                    type: 'year',
                    labelWidth: '130px',
                    disabled: false,
                },
                {
                    label: "房地产权证编号",
                    prop: 'propertyCode',
                    placeholder: '请输入房地产权证编号',
                    type: 'input',
                    labelWidth: '130px',
                    disabled: false,
                },
            ],
            districts: [],
            rules: {
                area: [
                    { required: true, message: '请选择坐落区域', trigger: 'change' },
                ],
                address: [
                    { required: true, message: '请输入房产地址', trigger: 'blur' },
                ],
                owner: [
                    { required: true, message: '请输入原房产权利人', trigger: 'blur' },
                ],
                // ownership: [
                //     { required: true, message: '请输入所有权性质', trigger: 'blur' },
                // ],
                buildFloorArea: [
                    { required: true, message: '请输入建筑面积', trigger: 'blur' },
                    { pattern: NUMBRT_REG, message: '建筑面积格式不正确' }
                ],
                // category: [
                //     { required: true, message: '请选择房产类型', trigger: 'change' },
                // ],
                // yearOfCompleted: [
                //     { required: true, message: '请选择竣工年份', trigger: 'change' },
                // ],
                propertyCode: [
                    { required: true, message: '请输入房地产权证编号', trigger: 'blur' },
                    // { pattern: NUMENGLISH_REG, message: '房地产权证编号不正确' }
                ],
            },
            isReset:2,
        })
        const router = useRouter()
        const formRefs = ref([])
        onBeforeMount(() => {
            data.districts = JSON.parse(<string>localStorage.getItem('districts'))
            methods.getData()
            data.status = props.isEnabled == 0 ? false : true
        })
        const methods = {
            close() {
                router.push('/system/flowPath/childForm/index')
            },
            //获取自定义表单
            getData() {
                formGet({ tag: 'zrrFrzFc' }).then((res: any) => {
                    data.id = res.id
                    data.name = res.name
                    data.isReset=res.isReset
                    if (!res.formStruct || res.formStruct == 'null' || res.formStruct == '{}') return
                    data.subTitle = res.subTitle
                    let formStruct = JSON.parse(res.formStruct)
                    formStruct.formFields.map((item:any)=>{
                        data.model.housePropertyData[item.prop]=''
                    })
                    data.fields1 = formStruct.formFields
                    data.fields.map((item: any) => {
                        item.disabled = props.isAudit
                    })
                    data.fields1.map((item: any) => {
                        item.disabled = props.isAudit
                    })
                    if (props.vars) {
                        const localData = copy(props.vars)
                        if(localData.housePropertyData){
                            for (let key in data.model.housePropertyData) {
                            if(localData.housePropertyData[key]!=null){
                                data.model.housePropertyData[key] = localData.housePropertyData[key]
                            }
                        }
                            data.model.housePropertyData.housePropertyData=localData.housePropertyData.housePropertyData||[]
                        }
                    } 
                    let arr = formStruct.formFields.filter((item: any) => {
                        return item.type == 'select'
                    })
                    let ids = arr.map((item: any) => {
                        return item.prop
                    })
                    data.model.housePropertyData.housePropertyData.map((item:any)=>{
                        item.yearOfCompleted=String(item.yearOfCompleted)
                    })
                    if (ids.length == 0) return
                    listByParentArr({ ids: ids }).then((res: any) => {
                        ids.map((item: any) => {
                            data.options[item] = res[item]
                        })
                    })
                })
            },
            //设置表单的启用跟停用
            change() {
                unitFormSet({ isEnabled: data.status ? 1 : 0, id: data.id, unitId: props.unitId }).then(() => {
                    Message({ type: 'success', message: '设置成功' })
                }).catch(() => {
                    data.status = !data.status
                })
            },
            //添加房产数据
            addHours() {
                data.model.housePropertyData.housePropertyData.push({
                    customerId: '',//客户ID
                    area: '',//坐落区域
                    address: '',//地址
                    owner: '',//产权权利人
                    ownership: '',//所有权性质：完全所有，共同所有
                    buildFloorArea: '',//建筑面积
                    category: '',//房产类型：自建房、商品房、小产权房、公租房、廉租房、法拍房.
                    yearOfCompleted: '',//竣工年份
                    propertyCode: '',//产权证编号
                    mortgageStatus: '',//抵押情况：0-未抵押，1-已抵押
                })
            },
            //删除当前信息
            deleteOut(index: number) {
                data.model.housePropertyData.housePropertyData.splice(index, 1)
            },
            //清除表单数据
            clearForm() {
                data.model = copy(model)
            },
            resultData() {
                let arr = []
                return new Promise((resolve, reject) => {
                    formRefs.value.map((item: any, index: number) => {
                        item.verification().then((res: any) => {
                            arr.push(true)
                            
                        }).catch(() => {
                            arr.push(false)
                            reject(false)
                        })
                        setTimeout(()=>{
                            if (arr.length==formRefs.value.length && arr.every((item1: any) => item1)) {
                                resolve(data.model)
                            }
                        },100)
                    })

                })

            },
            saveData() {
                return new Promise((resolve, reject) => {
                    resolve(data.model)
                })
            },
        }
         // 监听props的变化
         watch(
            () => props, (newValue, oldValue) => {
                if (newValue) {
                    if (props.vars) {
                        methods.getData()
                    }
                }
            }, { immediate: true, deep: true },);
        return {
            ...toRefs(data),
            ...methods, formRefs
        }
    }
})
</script>
<style scoped lang='scss'>
.add {
    border: 1px solid #1878FF;
    background: #EBF3FF;
    width: 94px;
    height: 24px;
    font-size: 12px;
    border-radius: 100px;
    color: #1878FF;
    margin-left: 16px;
    cursor: pointer;

    .size {
        font-size: 18px !important;
        margin-right: 5px;
        line-height: 20px;
    }
}

.tips {
    width: calc(100% - 20px);
    background: rgba(24, 120, 255, 0.04);
    height: 36px;
    color: #1878FF;
    padding: 0px 10px;
}
</style>
<style lang='scss'>
.zrrFrzFc_form {
    .el-form-item {
        width: 50% !important;
        margin-right: 0px !important;
    }

    .el-form-item__content {
        width: calc(100% - 130px) !important;

        .el-input,
        .el-cascader,
        .el-select {
            width: 100% !important;
        }
    }
}
</style>